<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head th:replace="_fragment :: head(~{::title})">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>OICQ登录</title>
	<meta name="description" content="Cabe - Responsive Multi-purpose HTML5 Template">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- STYLESHEETS -->
	<link href="../static/css/Montserrat.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/css/owl.carousel.min.css" type="text/css" media="all">
	<link rel="stylesheet" href="../static/css/owl.theme.default.min.css" type="text/css" media="all">

	<link rel="stylesheet" href="../static/css/themify-icons.css">

	<link rel="stylesheet" href="../static/css/main.min.css" type="text/css" media="all">
	<link rel="stylesheet" href="../static/css/alert.css">
<!--	<link rel="stylesheet" href="../static/css/dark.css">-->


</head>

<body>
	<main class="bg-grey" th:style="'background-image:url('+@{/images/bg_night.JPG}+')'" style="background-image: url(../static/images/bg_night.JPG);">
		<div id="app" class="d-flex align-items-center mx-auto login-form">
			<div class="container">
				<div v-show="visit===false" class="card">
					<div class="card-body p-5">
						<div>
							<h3 class="title-text mb-5"><b>OICQ登录</b></h3>
							<div class="input-group mb-3">
								<i class="ti-email"></i>
			                	<input class="form-control form-control-lg" v-model="email" type="email" placeholder="邮箱">
			              	</div>
							<p style="color: red" v-text="email_msg" v-show="email_check"></p>
							<div class="input-group mb-3">
			              		<i class="ti-lock"></i>
			                	<input class="form-control form-control-lg" @keyup.enter="login" v-model="password" type="password" placeholder="密码" required="">
			              	</div>
							<p style="color: red" v-text="password_msg" v-show="password_check"></p>
			              	<a class="link-primary" th:href="@{/forgot-password}" href="forgot-password.html">忘记密码?</a><br>
							<a class="link-primary" @click="openVisit" style="color: dodgerblue">不想注册?点击这里浅聊一下吧</a>
			              	<button v-on:click="login" class="btn btn-block btn-lg btn-primary mt-2" type="button">登录</button>
			              	<p class="mt-4 text-center">没有账户号吗? <a class="link-primary" th:href="@{/register}" href="register.html">点击这里注册</a>.</p>
			            </div>
					</div>
				</div>
				<div v-show="visit" style="display: none" class="card">
					<div class="card-body p-5">
						<div>
							<h3 class="title-text mb-1"><b>选择你的的头像</b></h3>
							<div >
								<img v-for="index in images" v-bind:src="'/images/user-'+index+'.png'"  style="margin-right: 5px" alt="image" @click="select_profile(index)">
							</div>
							<h3 class="title-text mb-1"><b>取一个帅气的昵称吧</b></h3>
							<div class="input-group mb-3">
								<input class="form-control form-control-lg" v-model="url_name" type="text" disabled placeholder="头像">
								<input class="form-control form-control-lg" v-model="name" type="text" placeholder="昵称">
							</div>
							<button @click="gotoChat" class="btn btn-block btn-lg btn-primary mt-2" type="button">进入聊天室</button>
							<p class="mt-4 text-center"><a class="link-primary" @click="openVisit" style="color: dodgerblue">点击这里返回登录</a>.</p>
						</div>
					</div>
				</div>
			</div>			
		</div>
	</main>


	<!-- SCRIPTS -->
	<!-- SCRIPTS -->
	<th:block th:replace="_fragment :: javascript">
		<script src="../static/js/plugin.js"></script>
		<script src="../static/js/main.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</th:block>

	<script>
		let email1 = sessionStorage.getItem("email");
		let password1 = sessionStorage.getItem("password");
		let app = new Vue({
			el:"#app",
			data:{
				email:"",
				password:"",
				email_check:false,
				password_check:false,
				email_msg:"请输入您的邮箱哟~",
				password_msg:"请输入您的密码哟~",
				visit:false,
				images:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],//可选头像
				name:"",
				url:"",
				url_name:""
			},
			methods: {
				select_profile(index){
						this.url = "/images/user-"+index+".png";
						this.url_name = "已选择头像"+index;
				},
				gotoChat(){
					if(this.url===""){
						alert("请先选择你的头像啦！");
						return;
					}
					if (this.name===""){
						alert("你还没有取昵称哦！");
						return;
					}
					if(this.name.lastIndexOf(" ")!==-1){
						alert("昵称不允许含有空格哦！");
						return;
					}
					sessionStorage.setItem("name",this.name);
					sessionStorage.setItem("url",this.url);
					window.location.href="/visit";
				},
				login(){
					if(this.email===""){
						this.email_check = true;
						return;
					}
					this.email_check = false;
					if(this.password===""){
						this.password_check = true;
						return;
					}
					this.password_check = false;
					let that = this;
					axios.post('/loginPost',{
						email:that.email,
						password:that.password
					}).then(function (response){
						if(response.data.status===0){
							that.email_msg=response.data.msg;
							that.email_check = true;
						}else if(response.data.status===100){
							that.password_msg=response.data.msg;
							that.password_check = true;
						}
						else{
							sessionStorage.setItem("id",response.data.id);
							window.location.href="/index";
						}
					})
							.catch(function (error){
								console.log(error);
							})
				},
				openVisit(){
					this.visit = !this.visit;
				}
			},
			created:function () {
				if(email1!=null){
					this.email = email1;
				}
				if(password1!=null){
					this.password = password1;
				}
			}
		})
	</script>
</body>

</html>
